<template>
  <div>
    <van-cell v-for="(item, index) in tableData" :key="index">
      <template>
        <div class="row" @touchstart="getTouchStart(index)" @touchend="getTouchEnd">
          <div class="row-left">{{ item.username }}</div>
          <div class="row-center">{{ item.nickName }}</div>
          <div class="row-right">
            <van-checkbox v-model="item.checked"></van-checkbox>
          </div>
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      loop: null, // 用于长按事件
    };
  },
  methods: {
    getTouchStart(index) {
      var that = this;
      clearTimeout(this.loop);
      this.loop = setTimeout(function () {
        //  传给父组件的值
        that.$emit("selectTochLong", index);
      }, 500);
    },
    getTouchEnd() {
      clearTimeout(this.loop);
    },
  },
};
</script>

<style lang="css" scoped>
.row {
  display: flex;
  justify-content: space-between;
}
.row-left {
  width: 80px;
}
.row-center {
  width: calc(100% - 120px);
}
.row-right {
  justify-content: center;
  width: 30px;
}
</style>
